<template>
<div class="content">
    <div class="form-box">
        <div class="form">
            <h1 style="font-size:calc(100vh * 0.03);line-height:calc(100vh * 0.03);">注册页</h1>
            <el-form ref="form" :rules="rules" :model="form" label-width="calc(100vw * 0.03)">
            <div>
                <el-input size="mini"  prop="username" placeholder="请输入用户名" v-model="form.username"  prefix-icon="el-icon-user"></el-input>
            </div>
            <div>
                <el-input size="mini" prop="password" placeholder="请输入密码" @keyup.enter.native="Submit('form')" v-model="form.password" show-password prefix-icon="el-icon-lock"></el-input>
            </div>	  
            <div class="form-bottom">
                    <el-button @click="toLogin" style="color:#000;" type="text">已有账号?去登录</el-button>
            </div>
            <el-button class="login" @click="Submit('form')">注册</el-button>
            </el-form>
        </div>
    </div>
</div>
</template>
  
<script>
import {registerUser} from "@/api/user"
export default{
    data(){
        return{
            form: {
                username: '',
                password:""
            },
            checked:false,
            rules:{
            // username
            username:[
                { required: true, message: '请输入用户名', trigger: 'blur' },
            ],
            password:[
                { required: true, message: '请输入密码', trigger: 'blur' },
            ],
            }
        }
    },
    created(){
    },
    methods:{
        Submit(formName) {
            if(!this.form.username){
            this.$message("请输入用户名")
            return;
            }
            if(!this.form.password){
            this.$message("请输入密码")
            return;
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    registerUser(this.form).then(res=>{
                        console.log(res);
                    })
                    // if(this.form.username=="admin"&&this.form.password=="123456"){
                    //     this.$store.commit ('setToken',"fdwerf322ed")
                    //     this.$message({
                    //     showClose: true,
                    //     message: '登录成功',
                    //     type: 'success',
                    //     duration:1500
                    //     });
                    //     this.$router.push("/healthy")
                    // }else{
                    //     this.$message("用户名或密码错误")
                    // }
                    } 
                else {
                    this.$message({
                        showClose: true,
                        message: "内容验证失败",
                        type: 'error',
                        duration:1500
                    });
                    return false;
                }
            });
        },
        go(e){
            // console.log(e);
        },
        oRemember(){

        },
        toLogin(){
            this.$router.push("login")
        }
    }
}
</script>

<style type="text/css" scoped lang="scss">
    .content{
        width: 100%;
        height: calc(100vh);
        background: url(../assets/login-bg.png) no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        a{
        text-decoration: none;
        }
        .form-box{
            width:calc(100vw * 0.72);
            height: calc(100vh * 0.8);
            background-color: #fff;
            border-radius: calc(100vh * 0.08);
            position: relative;
            background: url(../assets/login-bg1.png) no-repeat #fff;
            background-size: 100% calc(100vh * 0.8);
            h1{
                font-size: calc(100vh );
                color: #3d7eff;
            }
            .form{
                width: 40%;
                height: 100%;
                display: flex;
                position: absolute;
                flex-direction: column;
                justify-content: center;
                right: 0%;
                .el-form{
                    width: 60%;
                    margin-top: 8%;
                    .el-input{
                        margin: 14px 0;
                        height: calc(100vh * 0.06);
                        width: calc(100vw * 0.2);
                    }
                    ::v-deep .el-checkbox__inner{
                        border: 1px solid #5579ff;
                    }
                    ::v-deep .el-input__inner{
                        height: 55px;
                        border-radius: 32px;
                        height: calc(100vh * 0.06);
                        background-color: #f6f7fb;
                    }
                    .el-checkbox{
                        color: #5579ff;
                    }
                    .el-checkbox__inner{
                        border: 1px solid #5579ff;
                    }
                    .login{
                        height: calc(100vh * 0.06);
                        width: calc(100vw * 0.2);
                        border-radius: calc(100vh * 0.03);
                        background-color: #5579ff;
                        margin-top: 20px;
                    }
                    .form-bottom{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin: 12px 0;
                        a{
                            color: #5b78ff;
                            font-size: 15px;
                        }
                    }
                    .login{
                        color: #fff;
                    }
                }
            }
        }
    }
    
</style>